<%@ page language="java" contentType="text/html;charset=UTF-8" %><%@ include file="../../inc/global.jsp" 
%>
<!doctype html>
<html>
<head>
<title>${adminGlobalConfig.name}</title>
<%@include file="../head.jsp" %>
<style type="text/css">
.cbx{float:none;}
table tr.props th {background:#ffffdd;}
.choice {
	padding:3px 7px;
	margin:0px 0px 0px 7px;
	display:inline-block;
	background:#e0e0e0;
	cursor:pointer;
}
.options ul {margin:11px 11px;}
.options ul li {display:inline-block; background:#e0e0e0; padding:7px 11px; margin:7px 7px; cursor:pointer;}
.props em{
	display:inline-block; 
	background:#e0e0e0;
	border:1px solid #e0e0e0;
	padding:0px 7px;
	margin:0px 7px;
	color:#333;
	cursor:pointer;
}
.props em.slt{background:#ff6600;border:1px solid #ff6600; color:#fff;}
.propsValueForm {margin:7px;}
.propsValueForm th {width:80px;}
.propsValueForm th, .propsValueForm td {height:30px;}
.initButton {display:none; background:#ff4400; border:1px solid #ff6600; color:#fff;}
</style>
<script type="text/javascript"> 
function PropValue() {
	var _this = this;
	function disableButton() {
		$('.propsValueForm').find('input[type=button]').attr('disabled', 'disabled');
	};
	function enableButton() {
		$('.propsValueForm').find('input[type=button]').removeAttr('disabled');
	}
	// 绑定点击动作在每一次修改元素后
	function bindEvent(ele) {
		var emid = $(ele).attr('id');
		var pid = emid.substring(0, emid.indexOf('_'));
		var vid = emid.substring(emid.indexOf('_')+1,emid.length);
		$(ele).bind('click', function(){
			$(ele).parent().find('em').removeClass('slt');
			if(vid==$('#'+pid).val()) {
				// 点击之前已经被选中的话，再次点击则是取消选中
				$('#'+pid).val('');
			} else {
				$(ele).addClass('slt');
				$('#'+pid).val(vid);
			}
			cr.autoDisplayName();
		});
		$(ele).poshytip({
			content: '<a href="###" onclick=pval.showForm("'+pid+'","'+vid+'")>修改 || 删除</a>',
			showOn: 'hover',
			className: 'tip-yellow',
			alignTo: 'target',
			alignX: 'center',
			alignY: 'bottom',
			timeOnScreen: 5000,
			offsetX: 0,
			offsetY: 5,
			liveEvents: false
		});
	}
	this.showCategoryProps=function(id) {
		if(!id) {
			return ;
		}
		var url = '/a/admin/goods/category-props/'+id;
		$.get(url, function(data){
			$('.form .props').remove();
			$('#categoryId').parent().parent().after(data);
			$('.props').find('em').each(function(index,ele){
				bindEvent(ele);
			});
			$('.props').find('a').each(function(index,ele){
				$(ele).click(function(){
					var pid=$(this).attr('id');
					_this.showForm(pid,'');
				});
			});
			// 本身默认已经选中的属性值id
			var valIds = $('#valIds').html();
			if(valIds && valIds.length>0) {
				var vids = valIds.split(',');
				for(var i=0; i<vids.length; i++) {
					var vid = vids[i];
					if(!vid || vid.length==0) {
						continue;						
					}
					var ccc = $('em[id*='+vid+']');
					var pid = $(ccc).attr('id').substring(0, $(ccc).attr('id').indexOf('_'));
					ccc.addClass('slt');
					$('#'+pid).val(vid);
					//alert(vid + " " + pid);
				}
			}
		});
	}; // end showCategoryProps
	var dt, bg;
	this.showForm=function(pid, vid) {
		//alert(pid + " / " + vid);
		bg = aju.ajaxBg(function(){
			$.get('/a/brand-category/props-value/form?pid='+pid+'&vid='+vid, function(data){
				dt = aju.ajaxData().css({'width':'580', 'height':'300'});
				dt.html(data);
				aju.positionCenter(dt);
				// 显示关闭按钮并绑定关闭事件
				aju.ajaxClose(dt).click(function(){
					_this.hide();
				});
				$('body').keydown(function(event){
					if(KEY.ESC == event.keyCode) {
						_this.hide();
					}
				});
				$('#addPropValue').click(function(){
					_this.save();
				});
				$('#delPropValue').click(function(){
					_this.del();
				});
				$('#propValueName').focus();
			});
		});
	};
	this.del=function() {
		disableButton();
		var vid = $('#vid').val();
		var pid = $('#pid').val();
		$.post('/a/brand-category/props-value/del'
				, {vid:vid}
				, function(data){
					var _vid = $('#'+pid).val();
					if(_vid==vid) {
						$('#'+pid).val('');
					}
					var json = $.parseJSON(data);
					if(json.succeed) {
						$('#'+pid+'_'+vid).remove();
						// 添加成功后隐藏表单，追加结果至页面
							$('#delPropValue').poshytip({
								content: '操作成功！',
								showOn: 'none',
								timeOnScreen: '5000',
								className: 'tip-yellow',
								alignTo: 'target',
								alignX: 'center',
								alignY: 'bottom',
								offsetX: 0,
								offsetY: 5
							}).poshytip('show');
					}else{
						alert(json.msg);
					}
				}).fail(function() { alert("系统错误，无法弥补！请联系管理员！"); }).always(function(){enableButton();});
	}; // end del
	this.save=function() {
		disableButton();
		var cid = $('#cid').val();
		var vid = $('#vid').val();
		var pid = $('#pid').val();
		var vname = $('#propValueName').val();
		$.post('/a/brand-category/props-value/save'
				, {cid:cid, vid:vid, pid:pid, vname:vname}
				, function(data){
					var json = $.parseJSON(data);
					if(vid.length==0) {
						var em = $('<em></em>').attr('id', pid+'_'+json.data.id).html(json.data.name);
						$('#'+pid).before(em);
						bindEvent(em);
					} else {
						$('#'+pid+'_'+json.data.id).html(json.data.name);
					}
					if(json.succeed) {
						// 添加成功后隐藏表单，追加结果至页面
							$('#addPropValue').poshytip({
								content: '操作成功！',
								showOn: 'none',
								timeOnScreen: '5000',
								className: 'tip-yellow',
								alignTo: 'target',
								alignX: 'center',
								alignY: 'bottom',
								offsetX: 0,
								offsetY: 5
							}).poshytip('show');
					}else{
						alert(json.msg);
					}
				}).fail(function() { alert("系统错误，无法弥补！请联系管理员！"); })
				.always(function(){enableButton();});
	}; // end save
	this.hide=function() {
		$('#addPropValue').poshytip('hide');
		$('#delPropValue').poshytip('hide');
		aju.removeAll([dt,bg]);
		$('#ajaxClose').remove();
	};
}
var pval = new PropValue();
function showCategoryProps(id) {
	pval.showCategoryProps(id);
}
function Chooser(){
	var _this = this;
	this.autoDisplayName = function() {
		composeDisplayName();
	};
	// 自动组合打印名称
	function composeDisplayName() {
		var name="";
		$('.choice').each(function(i, e) {
			name+=$(e).html().trim();
		});
		name+=$('#name').val().trim();
		$('em.slt').each(function(i, e) {
			name+= "/" + $(e).html().trim();
		});
		$('#displayName').val(name);
	};
	this.init=function() {
		$('#categoryId').bind('change', function(){
			var id = $(this).val();
			showCategoryProps(id);
		});
		showList();
		$('.choice').each(function(i, elem) {
			if(i==0) {
				$(elem).bind('click', function() {
					showBrand(this);
				})
			}
			else if(i==1) {
		    	$(elem).bind('click', function() {
					showCategory(this);
				})
		    }
		});
		$('#name').bind('keyup',function(){
			composeDisplayName();
		});
		//按钮事件绑定
		$('#button').bind('click', function(){
			doSave(this);
		});
	};
	var dt, bg;
	function showBrand(button) {
		bg = aju.ajaxBg(function(){
			$.get('/a/admin/goods/brands', function(data){
				dt = aju.ajaxData().css({'width':'780', 'height':'600'});
				dt.html(data);
				aju.positionCenter(dt);
				// 显示关闭按钮并绑定关闭事件
				aju.ajaxClose(dt).click(function(){
					hide();
				});
				$(dt).find('li').bind('click', function(){
					var cid = $(this).attr('id');
					var val = $(this).html();
					$('#brandId').val(cid);
					$(button).html(val);
					hide();
					showList();
				});
			});
		});
	};
	function showCategory(button) {
		bg = aju.ajaxBg(function(){
			$.get('/a/admin/goods/categories', function(data){
				dt = aju.ajaxData().css({'width':'680', 'height':'500'});
				dt.html(data);
				aju.positionCenter(dt);
				// 显示关闭按钮并绑定关闭事件
				aju.ajaxClose(dt).click(function(){
					hide();
				});
				$(dt).find('li').bind('click', function(){
					var cid = $(this).attr('id');
					var val = $(this).html();
					$('#categoryId').val(cid);
					$(button).html(val);
					showCategoryProps(cid);	
					hide();
					showList();
				});
			});
		});
	};
	function hide() {
		aju.removeAll([dt,bg]);
		visible = false;
		$('#ajaxClose').remove();
	};
	function showList() {
		var cid = $('#categoryId').val();
		var bid = $('#brandId').val();
		if(cid && bid) {
			$.get('/a/ajax/goods/list?cid='+cid+'&bid='+bid, function(data){
				$('.list').html(data);
			});
		}
	};
	//
	function doSave(btn){
		$(btn).attr('disabled','disabled');
		if($('#prop_ids').val().length>0) {
			var pids = $('#prop_ids').val().split(',');
			var props='{';
			for(var i=0; i<pids.length;i++) {
				if(pids[i]==undefined || pids[i].length==0) {
					continue;
				}
				var elem = $('#'+pids[i]);
				props += '"'+elem.attr('id') + '":"' + elem.val()+'",';
			}
			props = props.substring(0, props.length-1);
			props+="}";
		}
		var id=$('#id').val();
		var barcode=$('#barcode').val();
		var brandId=$('#brandId').val();
		var categoryId=$('#categoryId').val();
		var barcode=$('#barcode').val();
		var name=$('#name').val();
		var displayName=$('#displayName').val();
		var price=$('#price').val();
		var url='/a/ajax/goods/save';
		$.ajax({url: url
			, type:'POST'
			, data: { id:id, brandId: brandId,
				barcode:barcode,
				categoryId:categoryId,
				name:name,
				displayName:displayName,
				props:props,price:price}
			, success:function(data){
				var json = $.parseJSON(data);
				if(json.succeed) {
					showList();
				}
				remind(json.msg, 6000);
				$(btn).removeAttr('disabled');
				if(id=undefined || id.length==0) {
					initForm(btn);
				}
			}
			, error: function() {
				remind('系统发生未知错误！');
				///$(button).removeAttr('disabled'); 
			}
		});
	}; // end dosave
	function initForm(btn) {
		$(btn).css('display','none');
		$('#initButton').css('display','inline').click(function(){
			$('#barcode').val('');
			$('#name').val('');
			$('#displayName').val('');
			$('#price').val('');
			$(this).css('display','none');
			$(btn).css('display','inline');
			$(btn).poshytip('hide')
		});
	};
	function hideRemind() {
		$('#button').poshytip('hide');
	};
	function remind(msg, time) {
		if(time==undefined) {
			time=3000;
		}
		$('#button').poshytip({
			content: function(){return msg},
			timeOnScreen: time,
			className: 'tip-yellow',
			showOn: 'none',
			alignTo: 'target',
			alignX: 'right',
			alignY: 'center',
			offsetX: 0,
			offsetY: 5
		}).poshytip('show');
	};
}
var cr = new Chooser();
$(document).ready(function() {
	cr.init();
	if($('#categoryId').val()) {
		showCategoryProps($('#categoryId').val());
	}
});
</script> 
</head>
<body>
<div class="wrapper">
<%@include file="../header.jsp" %>
<div class="body">
<div class="form">
<form:form commandName="goodsForm" method="POST" action="/a/goods/save">
<table>
<tr>
<th><fmt:message key="message.barcode" /></th>
<td>
<input type="text" id="barcode" name="barcode" value="${formBuf.barcode}" />
</td>
</tr>
<tr>
<th><fmt:message key="message.brand.name" /></th>
<td>
<span class="choice">
<c:if test="${empty formBuf.brandName}"><fmt:message key="message.brand.choice" /></c:if>
<c:if test="${!empty formBuf.brandName}">${formBuf.brandName}</c:if>
</span>
<input type="hidden" id="brandId" name="brandId" value="${formBuf.brandId}" />
</td>
</tr>
<tr>
<th><fmt:message key="message.category.name" /></th>
<td>
<span class="choice">
<c:if test="${empty formBuf.categoryName}"><fmt:message key="message.category.choice" /></c:if>
<c:if test="${!empty formBuf.categoryName}">${formBuf.categoryName}</c:if>
</span>
<input type="hidden" id="categoryId" name="categoryId" value="${formBuf.categoryId}" />
</td>
</tr>
<tr>
<th><fmt:message key="message.goods.name" /></th>
<td>
<form:input path="name"/>
</td>
</tr>
<tr>
<th><fmt:message key="message.goods.displayName" /></th>
<td>
<form:input path="displayName"/>
</td>
</tr>
<tr>
<th><fmt:message key="message.goods.price" /></th>
<td>
<form:input path="price"/>
</td>
</tr>
<tr>
<th></th>
<td>
<form:hidden path="id"/>
<input type="button" name="button" id="button" value='<fmt:message key="message.save.sure" />' />
<input type="button" name="initButton" id="initButton" class="initButton" value="继续添加" />
<input type="hidden" name="backURL" id="backURL" value="${backURL}" />
<span id="valIds" class="hide"><c:forEach var="vals" items="${goodsPropValues}">${vals.propValueId},</c:forEach></span>
</td>
</tr>
</table>
</form:form>
</div>
<div class="sidebarMenu">
<ul>
<li><a href="/a/goods/form">新增商品型号</a></li>
</ul>
</div>
<%@ include file="sidebar.jsp" %>
<div class="list"></div>
<!--  -->
</div>
</div>
</body>
</html>